<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			html,body {
				margin: 0;
				padding: 0;
			}
			.content {
				width: 300px;
				height: 100px;
				margin: 20px;
				background: #CCCCCC;
				position: relative;
			}
			.d0 {
				max-width: 500px;
				width: 100%;
				height: auto;
				margin: 20px 0 ;
			}
			.d0 img {
				max-width: 400px;
			}
			.d1 {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				/*z-index: -1;*/
			}
			.d1 svg {
				height: 100%;
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div class="content d0">
			<img src="http://www.kfc.com.cn/kfccda/UploadPic/HomePage/201809/20180917040038_15.jpg" />
			<div class="d1">
				<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
					<polygon points="0,20 100%,0 100%,100%"
					style="fill:#cccccc;
					stroke:#000000;stroke-width:1"/>
				</svg>
			</div>
			
		</div>
		
		
		<div class="content"></div>
		<div class="content">
			<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
			  <circle cx="100" cy="50" r="40" stroke="black"
			  stroke-width="2" fill="red" />
			</svg>
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0,300,200"  version="1.1" width="500" height="400"
				preserveAspectRatio="xMinYMax none"
				style="border:1px solid;">
			  <polygon points="0,80 300,0 300,200 0,200" style="fill:lime;stroke:purple;stroke-width:1" />
			</svg>
		</div>
	</body>
</html>
